<template>
  <div class="vFormDesigner">
    <FormListPanel class="vFormDesigner__formList" ref="formListRef" />
    <WidgetPanel class="vFormDesigner__widget" />
    <FormPanel class="vFormDesigner__form" />
    <SettingPanel class="vFormDesigner__setting" />
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted } from "vue";
import FormListPanel from "../components/form-list-panel/index.vue";
import WidgetPanel from "../components/widget-panel/index.vue";
import FormPanel from "../components/form-widget/index.vue";
import SettingPanel from "../components/setting-panel/index.vue";
import { useFormStore } from "@bis/stores/form";

const props = defineProps({
  formDepotId: {
    type: Number,
    required: true,
  },
});

const formListRef = ref(null);

const formStore = useFormStore();

const init = () => {
  // 先重置
  formStore.reset();
  formStore.isDesigner = true;
  formStore.formConfig.formDepotId = props.formDepotId;
};

init();

onMounted(() => {
  formListRef.value.getFormList();
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
